<template>
  <div class="qckc">
    <div class="tx-heade">
      <el-form
        ref="form"
        :model="form"
        label-width="160px"
        style="margin: 10px 0 0 0"
      >
        <el-form-item label="选择机构类型">
          <el-select v-model="form.region" placeholder="集团公司">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <header>
      <div class="header-left">统计信息</div>
      <div class="header-right">
        <span class="span1">押金数 3,000,000.00/元</span>
        <span>押桶数 3,000/桶</span>
      </div>
    </header>
    <div class="content">
      <p class="p1">统计明细</p>
      <div class="head">
        <el-form class="h-from" ref="form" :model="form" label-width="80px">
          <el-form-item label="订单时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <el-input
          placeholder="请输入订单或服务单号"
          prefix-icon="el-icon-search"
          style="margin: 0px 0 0 20px; width: 200px; height: 40px"
        >
        </el-input>
        <el-button
          type="primary"
          style="margin: 0px 0 0 20px; width: 100px; height: 40px" @click="servicedetail"
          >查询</el-button
        >
      </div>
      <el-table :data="tableData">
        <el-table-column
          prop="date"
          label="时间"
          align="center"
          width="220"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="销售/服务单号"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column prop="address" align="center" label="订单类型 ">
        </el-table-column>
        <el-table-column prop="yajin" label="押金数 " sortable align="center">
        </el-table-column>
        <el-table-column prop="yatong" label="押桶数 " sortable align="center" >
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template>
            <el-button type="text" size="small" style="margin-left: 0" @click="saledetail"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="100">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "2020-09-08 xx:xx:xx",
          name: "020101220092300",
          address: "服务订单",
          yajin: "- 30.00",
          yatong: "-1",
          
        },
        {
          date: "2020-09-08 xx:xx:xx",
          name: "020101220092300",
          address: "销售订单",
          yajin: "+ 30.00",
          yatong: "+1",
          
        },
        {
          date: "2020-09-08 xx:xx:xx",
          name: "020101220092300",
          address: "销售订单",
          yajin: "+ 30.00",
          yatong: "+1",
          
        },
      ],
    };
  },
  methods: {
      saledetail(){
          this.$router.push({path:"/tongzhuangshui/saledetail"})
      },
      servicedetail(){
        this.$router.push({path:"/tongzhuangshui/servicedetail"})
      }
  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  overflow: hidden;

  .tx-heade {
    width: 100%;
    height: 60px;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 20px;
  }

  header {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;
    background-color: #fff;

    padding: 0 4%;
    .header-left {
      line-height: 40px;
      border-bottom: 1px solid #bbb;
    }
    .header-right {
      line-height: 40px;
      border-bottom: 1px solid #bbb;
      .span1 {
        margin-right: 100px;
      }
    }
  }
  .content {
    width: 100%;
    height: 500px;
    background-color: #fff;
    .p1 {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #bbb;
      padding: 0 4%;
    }
    .head {
      display: flex;
      padding: 0 4%;
      //   .h-from {
      //     margin: 30px 0 0 49%;
      //   }
    }
    .fenye {
      width: 100%;
      margin-top: 80px;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 12%;
      }
    }
  }
}
</style>